<template>
  <div class="waper">
    <el-row :gutter="20">
        <el-col :span="24">
          <h2>图表模块</h2>
        </el-col>
        <el-col :span="6">

                <!-- Line图表 -->
                <div class="vol-data">

                      <div class="charts" style="width:'100%',height:'6.54rem'">

                                <div class="charts-title">
                                  Basic Line Chart
                                </div>
                                <div id="lineChart" :style="{width:'100%',height:'270px'}">
                                </div>
                        
                      </div>

                </div>

        </el-col>

        <el-col :span="6">

                <!-- area图表 -->
                <div class="vol-data">

                      <div class="charts" style="width:'100%',height:'6.54rem'">

                                <div class="charts-title">
                                  Basic area chart
                                </div>
                                <div id="areaChart" :style="{width:'100%',height:'270px'}">
                                </div>
                        
                      </div>

                </div>

        </el-col>

        <el-col :span="6">

                <!-- area图表 -->
                <div class="vol-data">

                      <div class="charts" style="width:'100%',height:'6.54rem'">

                                <div class="charts-title">
                                  Smoothed Line Chart
                                </div>
                                <div id="smoothedLine" :style="{width:'100%',height:'270px'}">
                                </div>
                        
                      </div>

                </div>

        </el-col>

        <el-col :span="6">

                <!-- area图表 -->
                <div class="vol-data">

                      <div class="charts" style="width:'100%',height:'6.54rem'">

                                <div class="charts-title">
                                  Line Style and Item Style
                                </div>
                                <div id="lineStyleAndItemStyle" :style="{width:'100%',height:'270px'}">
                                </div>
                        
                      </div>

                </div>

        </el-col>

        <el-col :span="6">

                <!-- area图表 -->
                <div class="vol-data">

                      <div class="charts" style="width:'100%',height:'6.54rem'">

                                <div class="charts-title">
                                  Stacked area chart
                                </div>
                                <div id="stackedArea" :style="{width:'100%',height:'270px'}">
                                </div>
                        
                      </div>

                </div>

        </el-col>

        <el-col :span="6">

                <!-- area图表 -->
                <div class="vol-data">

                      <div class="charts" style="width:'100%',height:'6.54rem'">

                                <div class="charts-title">
                                  Stacked Line Chart
                                </div>
                                <div id="stackedLineChart" :style="{width:'100%',height:'270px'}">
                                </div>
                        
                      </div>

                </div>

        </el-col>

        <el-col :span="6">

                <!-- Line Y Category图表 -->
                <div class="vol-data">

                      <div class="charts" style="width:'100%',height:'6.54rem'">

                                <div class="charts-title">
                                  Line Y Category
                                </div>
                                <div id="lineYCategory" :style="{width:'100%',height:'270px'}">
                                </div>
                        
                      </div>

                </div>

        </el-col>

        <el-col :span="6">

                <!-- Distribution of Electricity图表 -->
                <div class="vol-data">

                      <div class="charts" style="width:'100%',height:'6.54rem'">

                                <div class="charts-title">
                                  Distribution of Electricity
                                </div>
                                <div id="distributionOfElectricity" :style="{width:'100%',height:'270px'}">
                                </div>
                        
                      </div>

                </div>

        </el-col>

        <el-col :span="12">

                <!-- Temperature Change in the comi图表 -->
                <div class="vol-data">

                      <div class="charts" style="width:'100%',height:'6.54rem'">

                                <div class="charts-title">
                                  Temperature Change in the comi
                                </div>
                                <div id="temperatureChangeInThecomi" :style="{width:'100%',height:'500px'}">
                                </div>
                        
                      </div>

                </div>

        </el-col>

        <el-col :span="12">

                <!-- Doughnut Chart图表 -->
                <div class="vol-data">

                      <div class="charts" style="width:'100%',height:'6.54rem'">

                                <div class="charts-title">
                                  Doughnut Chart
                                </div>
                                <div id="doughnutChart" :style="{width:'100%',height:'500px'}">
                                </div>
                        
                      </div>

                </div>

        </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
        name: 'dataChart',
        data () {
          return {}
        },
        created(){
            /** 
             * 每次打开时第一个执行的方法，可用来获取图表里面的需要显示的数据
             * this.getdate();
            */
        },
        decreated(){
            window.removeEventListener('resize',this.renderChart)
        },
        updated(){
            /**
             * 当执行完毕created后执行updated，用来渲染图表数据
             */
            this.renderChart()
        },
        mounted (){
            let lineChart = this.$echarts.init(document.getElementById('lineChart'))
            lineChart.setOption({
                xAxis: {
                type: 'category',
                data: ['0', '6H', '9H', '12H', '15H', '18H', '24H']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [1, 3, 4, 7, 4, 6, 9],
                    type: 'line'
                }]
            })

            let areaChart = this.$echarts.init(document.getElementById('areaChart'))
            areaChart.setOption({
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                    type: 'line',
                    areaStyle: {}
                }]
            })

            let smoothedLine = this.$echarts.init(document.getElementById('smoothedLine'))
            smoothedLine.setOption({
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                    type: 'line',
                    smooth: true
                }]
            })

            let lineStyleAndItemStyle = this.$echarts.init(document.getElementById('lineStyleAndItemStyle'))
            lineStyleAndItemStyle.setOption({
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [120, 200, 150, 80, 70, 110, 130],
                    type: 'line',
                    symbol: 'triangle',
                    symbolSize: 20,
                    lineStyle: {
                        normal: {
                            color: 'green',
                            width: 4,
                            type: 'dashed'
                        }
                    },
                    itemStyle: {
                        normal: {
                            borderWidth: 3,
                            borderColor: 'yellow',
                            color: 'blue'
                        }
                    }
                }]
            })


            let stackedArea = this.$echarts.init(document.getElementById('stackedArea'))
            stackedArea.setOption({
                tooltip : {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data:['邮件营销','联盟广告','视频广告','直接访问']
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        boundaryGap : false,
                        data : ['周一','周二','周三','周四','周五','周六','周日']
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'邮件营销',
                        type:'line',
                        stack: '总量',
                        areaStyle: {},
                        data:[120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                        name:'联盟广告',
                        type:'line',
                        stack: '总量',
                        areaStyle: {},
                        data:[220, 182, 191, 234, 290, 330, 310]
                    },
                    {
                        name:'视频广告',
                        type:'line',
                        stack: '总量',
                        areaStyle: {},
                        data:[150, 232, 201, 154, 190, 330, 410]
                    },
                    {
                        name:'直接访问',
                        type:'line',
                        stack: '总量',
                        areaStyle: {normal: {}},
                        data:[320, 332, 301, 334, 390, 330, 320]
                    }
                ]
            })

            let stackedLineChart = this.$echarts.init(document.getElementById('stackedLineChart'))
            stackedLineChart.setOption({
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data:['邮件营销','联盟广告','视频广告','直接访问']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['周一','周二','周三','周四','周五','周六','周日']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name:'邮件营销',
                        type:'line',
                        stack: '总量',
                        data:[120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                        name:'联盟广告',
                        type:'line',
                        stack: '总量',
                        data:[220, 182, 191, 234, 290, 330, 310]
                    },
                    {
                        name:'视频广告',
                        type:'line',
                        stack: '总量',
                        data:[150, 232, 201, 154, 190, 330, 410]
                    },
                    {
                        name:'直接访问',
                        type:'line',
                        stack: '总量',
                        data:[320, 332, 301, 334, 390, 330, 320]
                    }
                ]
            })

            let lineYCategory = this.$echarts.init(document.getElementById('lineYCategory'))
            lineYCategory.setOption({
                legend: {
                    data:['高度(km)与气温(°C)变化关系']
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: "Temperature : <br/>{b}km : {c}°C"
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} °C'
                    }
                },
                yAxis: {
                    type: 'category',
                    axisLine: {onZero: false},
                    axisLabel: {
                        formatter: '{value} km'
                    },
                    boundaryGap: false,
                    data: ['0', '10', '20', '30', '40', '50', '60', '70', '80']
                },
                series: [
                    {
                        name: '高度(km)与气温(°C)变化关系',
                        type: 'line',
                        smooth: true,
                        lineStyle: {
                            normal: {
                                width: 3,
                                shadowColor: 'rgba(0,0,0,0.4)',
                                shadowBlur: 10,
                                shadowOffsetY: 10
                            }
                        },
                        data:[15, -50, -56.5, -46.5, -22.1, -2.5, -27.7, -55.7, -76.5]
                    }
                ]
            })

            let distributionOfElectricity = this.$echarts.init(document.getElementById('distributionOfElectricity'))
            distributionOfElectricity.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                toolbox: {
                    show: true,
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis:  {
                    type: 'category',
                    boundaryGap: false,
                    data: ['00:00',  '02:30', '05:00',  '07:30',  '10:00',  '12:30',  '15:00',  '17:30',  '20:00',  '22:30']
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} W'
                    },
                    axisPointer: {
                        snap: true
                    }
                },
                visualMap: {
                    show: false,
                    dimension: 0,
                    pieces: [{
                        lte: 6,
                        color: 'green'
                    }, {
                        gt: 6,
                        lte: 8,
                        color: 'red'
                    }, {
                        gt: 8,
                        lte: 14,
                        color: 'green'
                    }, {
                        gt: 14,
                        lte: 17,
                        color: 'red'
                    }, {
                        gt: 17,
                        color: 'green'
                    }]
                },
                series: [
                    {
                        name:'用电量',
                        type:'line',
                        smooth: true,
                        data: [30, 25, 27, 55, 40, 38, 40,  60, 80,60],
                        markArea: {
                            data: [ [{
                                name: '早高峰',
                                xAxis: '07:30'
                            }, {
                                xAxis: '10:00'
                            }], [{
                                name: '晚高峰',
                                xAxis: '17:30'
                            }, {
                                xAxis: '22:30'
                            }] ]
                        }
                    }
                ]
            })

            let temperatureChangeInThecomi = this.$echarts.init(document.getElementById('temperatureChangeInThecomi'))
            temperatureChangeInThecomi.setOption({
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data:['最高气温','最低气温']
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        dataView: {readOnly: false},
                        magicType: {type: ['line', 'bar']},
                        restore: {},
                        saveAsImage: {}
                    }
                },
                xAxis:  {
                    type: 'category',
                    boundaryGap: false,
                    data: ['周一','周二','周三','周四','周五','周六','周日']
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} °C'
                    }
                },
                series: [
                    {
                        name:'最高气温',
                        type:'line',
                        data:[11, 11, 15, 13, 12, 13, 10],
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    },
                    {
                        name:'最低气温',
                        type:'line',
                        data:[1, -2, 2, 5, 3, 2, 0],
                        markPoint: {
                            data: [
                                {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'},
                                [{
                                    symbol: 'none',
                                    x: '90%',
                                    yAxis: 'max'
                                }, {
                                    symbol: 'circle',
                                    label: {
                                        normal: {
                                            position: 'start',
                                            formatter: '最大值'
                                        }
                                    },
                                    type: 'max',
                                    name: '最高点'
                                }]
                            ]
                        }
                    }
                ]
            })

            let doughnutChart = this.$echarts.init(document.getElementById('doughnutChart'))
            doughnutChart.setOption({
                 tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
                },
                series : [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius : '55%',
                        center: ['50%', '60%'],
                        data:[
                            {value:335, name:'直接访问'},
                            {value:310, name:'邮件营销'},
                            {value:234, name:'联盟广告'},
                            {value:135, name:'视频广告'},
                            {value:1548, name:'搜索引擎'}
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            })

        },
        methods:{

          //渲染图表方法
          renderChart(){
            console.log('3545')
            let myChart = this.$echarts.init(document.getElementById('myChart'))
            myChart.setOption({
              xAxis: {
              type: 'category',
              data: ['0', '6H', '9H', '12H', '15H', '18H', '24H']
              },
              yAxis: {
                  type: 'value'
              },
              series: [{
                  data: [1, 3, 4, 7, 4, 6, 9],
                  type: 'line'
              }]
            })
          }

        }
}
</script>




<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
  text-align: left
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.charts-title{
    font-size: 20px;
    text-align: left;
    margin-bottom: 35px;
    margin-top: 60px;
}
</style>
